﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>数据资源服务</title>
    <link rel="stylesheet" type="text/css" href="../../resources/semantic/semantic.css">
    <link rel="stylesheet" type="text/css" href="../../content/css/common.css">
    <link rel="stylesheet" type="text/css" href="../../content/css/index.css">
    <script src="../../resources/jquery/jquery-3.1.1.js"></script>
    <script src="../../resources/semantic/semantic.js"></script>
    <script src="../../resources/angular/angular.min.js"></script>

    <link rel="stylesheet" type="text/css" href="../../resources/semantic-ui-calendar/calendar.css">
    <script src="../../resources/semantic-ui-calendar/calendar.js"></script>

    <link rel="stylesheet" type="text/css" href="../../resources/webuploader/webuploader.css">
    <script src="../../resources/webuploader/webuploader.js"></script>

    <link rel="stylesheet" type="text/css" href="../../content/css/common.css">
    <script src="../../content/js/common.js"></script>
    <script src="../../content/directives/onRepeatFinish.js"></script>
    <script src="../../content/directives/pager.js"></script>
    <script src="../../content/directives/dropdownlist.js"></script>

    <link rel="stylesheet" type="text/css" href="../iacs/css/common.css">
    <script src="../iacs/js/common.js"></script>
</head>
<body>
    <div ng-app="app" ng-controller="ctrl" ng-cloak class="ui padded basic segment" style="text-align:center;">
        <div class="ui basic segment dxr_segment">
            <h2 class="ui blue header" style="display:inline-block;">
                <i class="laptop icon"></i>
                <div class="content">
                    数据资源服务
                </div>
            </h2>
            <div class="ui fluid action input">
                <input type="text" placeholder="输入要检索的条件" ng-model="conditions.Text" />
                <button class="ui blue icon button" type="submit" ng-click="search(1,size)">
                    <i class="search icon"></i>
                </button>
                <button class="ui button" ng-click="showCondtions()">高级检索</button>
            </div>
            <div class="ui segment" ng-show="canShowCondtion" style="text-align:left;">
                <h5 class="ui dividing header">高级检索</h5>
                <div class="ui form">
                    <div class="two fields">
                        <div class="field">
                            <label>开始时间</label>
                            <div class="ui calendar">
                                <div class="ui fluid input left icon">
                                    <i class="calendar icon"></i>
                                    <input type="text" placeholder="开始时间" ng-model="conditions.Start" />
                                </div>
                            </div>
                        </div>
                        <div class="field">
                            <label>结束时间</label>
                            <div class="ui calendar">
                                <div class="ui fluid input left icon">
                                    <i class="calendar icon"></i>
                                    <input type="text" placeholder="结束时间" ng-model="conditions.End" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="ui segment" style="padding:0 !important;text-align:left;">
                <div class="ui secondary pointing blue menu">
                    <a class="{{item.statu}} item" ng-click="menuClick(item)" ng-repeat="item in menu">
                        {{item.text}}
                    </a>
                </div>
                <div class="ui basic segment resultSegment" ng-show="menu[0].show">
                    <div class="ui icon hidden warning message resultMsg">
                        <i class="exclamation triangle icon"></i>
                        <div class="content">
                            <div class="header">无数据！</div>
                            <p>该条件下没有数据，请换个条件试试。</p>
                        </div>
                    </div>
                    <div class="ui divided items">
                        <div class="item" ng-repeat="item in results">
                            <div class="ui tiny image item_logo color_{{item.Type}}">
                                {{item.TypeSubName}}
                            </div>
                            <div class="content">
                                <div class="header fcolor_{{item.Type}}" style="width:100%;">
                                    {{item.TypeName}}

                                    <div class="ui right floated compact mini buttons">
                                        <a class="ui blue button" href="">
                                            查看详情
                                        </a>
                                        <a class="ui teal button" href="#" ng-show="item.ShowPoint">
                                            定位
                                        </a>
                                    </div>
                                </div>
                                <div class="description">
                                    <span ng-repeat="p in item.Content"><strong>{{p.Key}}:</strong>{{p.Value}}&nbsp;&nbsp;</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div dxr-pager option="pagerOption"></div>
                    <div class="ui dimmer">
                        <div class="ui indeterminate text loader">正在加载...</div>
                    </div>
                </div>
                <div class="ui basic segment resourceSegment" ng-show="menu[1].show">
                    <div class="ui icon hidden warning message resourceMsg">
                        <i class="exclamation triangle icon"></i>
                        <div class="content">
                            <div class="header">无数据！</div>
                            <p>您必须先导入数据才能查看。</p>
                        </div>
                    </div>
                    <div class="ui form">
                        <div class="two fields">
                            <div class="field">
                                <div class="ui small fluid action input">
                                    <input type="text" placeholder="输入要检索的条件" ng-model="resourceCondition.Key" />
                                    <button class="ui small blue icon button" ng-click="searchResource(1,size)">
                                        <i class="search icon"></i>
                                    </button>
                                    <div class="ui small teal button" ng-click="showImport()">导入</div>
                                </div>
                            </div>
                            <div class="field">
                            </div>
                        </div>
                        <div class="field">
                            <table class="ui selectable celled striped table">
                                <thead>
                                    <tr>
                                        <th>类别</th>
                                        <th>导入条数</th>
                                        <th>资源名称</th>
                                        <th>采集人</th>
                                        <th>采集时间</th>
                                        <th>所属派出所</th>
                                        <th>采集人电话</th>
                                        <th>导入时间</th>
                                        <th>导入人</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="item in resources">
                                        <td title="{{item.TypeName}}">{{cutStr(item.TypeName,5)}}</td>
                                        <td>{{item.Count}}</td>
                                        <td title="{{item.Name}}">{{cutStr(item.Name,5)}}</td>
                                        <td>{{item.CollectorName}}</td>
                                        <td>{{item.CollectDateText}}</td>
                                        <td title="{{item.CollectorDepartmentName}}">{{cutStr(item.CollectorDepartmentName,5)}}</td>
                                        <td>{{item.CollectorPhoneNo}}</td>
                                        <td>{{item.CreatedTime}}</td>
                                        <td>{{item.CreatorName}}</td>
                                        <td>
                                            <div class="ui tiny compact icon buttons">
                                                <button class="ui button" title="删除" ng-click="deleteResourc(item.Id)"><i class="close icon"></i></button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="10">
                                            <div dxr-pager option="resPagerOption"></div>
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                    <div class="ui modal importModal">
                        <div class="header">
                            数据导入
                        </div>
                        <div class="content">
                            <form class="ui form importForm">
                                <div class="two fields">
                                    <div class="field">
                                        <label>文件</label>
                                        <div class="ui fluid action input">
                                            <input name="name" readonly type="text" placeholder="请选择文件" value="{{editModel.Name}}" />
                                            <div class="ui teal button fileupload">选择</div>
                                        </div>
                                        <input name="url" type="hidden" value="{{editModel.Url}}" />
                                    </div>
                                    <div class="field">
                                        <label ng-show="confirmFile">确定上传？</label>
                                        <div ng-show="confirmFile" class="ui buttons">
                                            <div class="ui button" ng-click="cancelUpload()">取消</div>
                                            <div class="or"></div>
                                            <div class="ui green button" ng-click="fileUpload()">上传</div>
                                        </div>
                                        <div class="ui indicating progress fileupprogress" style="display:none;margin-top:1.5em;">
                                            <div class="bar">
                                                <div class="progress"></div>
                                            </div>
                                            <div class="label"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="two fields">
                                    <div class="field">
                                        <label>类别</label>
                                        <div dxr-dropdownlist="typesList" ng-model="editModel.Type" d-option="dataTypesOption" style="width:calc(100% - 110px);"></div>

                                        <div class="ui blue right floated button" ng-click="donwloadTemp()">模板下载</div>
                                    </div>
                                    <div class="field">
                                        <label>采集时间</label>
                                        <div class="ui calendar">
                                            <div class="ui fluid input left icon">
                                                <i class="calendar icon"></i>
                                                <input name="collectDate" type="text" ng-model="editModel.CollectDate" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="field">
                                    <label>派出所</label>
                                    <div class="ui fluid input">
                                        <input name="collectorDepartmentId" type="text" ng-model="editModel.CollectorDepartmentId" />
                                    </div>
                                </div>
                                <div class="field">
                                    <label>采集人</label>
                                    <div class="ui fluid input">
                                        <input name="collectorId" type="text" ng-model="editModel.CollectorId" />
                                    </div>
                                </div>
                                <div class="field">
                                    <label>联系电话</label>
                                    <div class="ui fluid input">
                                        <input name="collectorPhoneNo" type="text" ng-model="editModel.CollectorPhoneNo" />
                                    </div>
                                </div>
                                <div class="ui error message"></div>
                            </form>
                        </div>
                        <div class="actions">
                            <div class="ui black deny button">
                                取消
                            </div>
                            <div class="ui positive right labeled icon button">
                                执行导入
                                <i class="checkmark icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="ui dimmer">
                        <div class="ui indeterminate text loader">正在加载...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var app = angular.module('app', ['dxr.controls']);
        app.controller('ctrl', ['$scope', '$http', '$interval', '$timeout', function ($scope, $http, $interval, $timeout) {

            $scope.size = 10;

            $scope.canShowCondtion = false;
            $scope.canShowResult = true;
            $scope.canShowUpdate = false;

            $scope.conditions = {
                Text: "",
                Start: "",
                End: ""
            };

            $scope.showCondtions = function () {
                $scope.canShowCondtion = !$scope.canShowCondtion;
                if (!$scope.canShowCondtion) {
                    $scope.conditions.Start = "";
                    $scope.conditions.End = "";
                }
            };

            $scope.menu = [
                {
                    id: 1,
                    text: "搜索结果",
                    statu: "active",
                    show: true,
                },
                {
                    id: 2,
                    text: "资源上传",
                    statu: "",
                    show: false,
                }
            ];

            $scope.menuClick = function (item) {
                for (var i = 0; i < $scope.menu.length; i++) {
                    $scope.menu[i].statu = "";
                    $scope.menu[i].show = false;
                }
                item.statu = "active";
                item.show = true;

                if (item.id == 2) {
                    $scope.searchResource(1, $scope.size);
                }
            };

            $('.resultSegment').dimmer({
                closable: false
            });

            var cache = [];
            var dataIndex = 1;
            var pageIndex = 1;

            function getData(index) {
                if (cache.length < 1)
                    return 0;
                if (index > Math.ceil(cache.length / $scope.size))
                    return 1;

                return cache.slice((index - 1) * $scope.size, index * $scope.size);
            }

            $scope.search = function (index, size) {
                $scope.menuClick($scope.menu[0]);

                if (index === 1) {
                    cache = [];
                    dataIndex = 1;
                    pageIndex = 1;
                }

                if ($dxr.isNullOrEmpty($scope.conditions.Text))
                    return;

                var obj = getData(index);

                if (obj !== 0 && obj !== 1 && obj.length == $scope.size) {
                    $scope.results = obj;

                    $scope.pagerOption.setPaging({
                        index: pageIndex,
                        size: $scope.size,
                    });
                    return;
                }
                else
                    index = dataIndex + obj;

                $('.resultSegment').dimmer('show');

                $dxrConfig.iacs.information.search($http, $scope.conditions, index, size, function (data, index, total) {

                    index = parseInt(index);

                    $('.resultSegment').dimmer('hide');

                    if ($dxr.isNullOrEmpty(data) || data.length < 1) {
                        $(".resultMsg").removeClass("hidden");
                        pageIndex--;
                        if (pageIndex < 1)
                            pageIndex = 1;
                    }
                    else {
                        $(".resultMsg").addClass("hidden");

                        dataIndex = index;

                        for (var i = 0; i < data.length; i++) {
                            cache.push(data[i]);
                        }

                        $scope.results = getData(pageIndex);

                        $scope.pagerOption.setPaging({
                            index: pageIndex,
                            size: $scope.size,
                        });
                    }

                }, function (type, msg) {
                    $('.resultSegment').dimmer('hide');
                    alert("", type, msg);

                    pageIndex--;
                    if (pageIndex < 1)
                        pageIndex = 1;

                    $scope.pagerOption.setPaging({
                        index: parseInt(index),
                        size: $scope.size,
                    })
                });
            };

            $scope.pagerOption = {
                pageChanged: function (index) {
                    pageIndex = index;
                    $scope.search(index, $scope.size);
                }
            };

            window.onkeydown = function (e) {
                if (e.keyCode == 13)
                    $scope.search(1, $scope.size);
            };

            $scope.resourceCondition = {
                Key: "",
            };

            $scope.resPagerOption = {
                pageChanged: function (index) {
                    $scope.searchResource(index, $scope.size);
                }
            };

            $('.resourceSegment').dimmer({
                closable: false
            });

            $scope.searchResource = function (index, size) {
                $('.resourceSegment').dimmer('show');
                $dxrConfig.iacs.information.query($http, $scope.resourceCondition, index, size, function (data, index, total) {
                    $('.resourceSegment').dimmer('hide');
                    if ($dxr.isNullOrEmpty(data) || data.length < 1)
                        $(".resourceMsg").removeClass("hidden");
                    else
                        $(".resourceMsg").addClass("hidden");

                    $scope.resources = data;
                    $scope.resPagerOption.setPaging({
                        index: parseInt(index),
                        size: $scope.size,
                        count: total,
                    })
                }, function (type, msg) {
                    $('.resourceSegment').dimmer('hide');
                    $dxr.alert("", type, msg);
                });
            };

            $scope.deleteResourc = function (id) {
                $dxr.confirm("", "确定删除这条数据？", function () {
                    $dxrConfig.iacs.information.delete($http, id, function (data, index, total) {
                        for (var i = 0; i < $scope.resources.length; i++) {
                            if ($scope.resources[0].Id == id) {
                                $scope.resources.splice(i, 1);
                                return;
                            }
                        }
                    });
                });
            };

            $scope.cutStr = $dxr.cutString;

            $scope.editModel = {
                Type: "",
                Path: "",
                Url: "",
                Name: "",
                CollectorId: "",
                CollectorName: "",
                CollectDate: "",
                CollectorDepartmentId: "",
                CollectorDepartmentName: "",
                CollectorPhoneNo: "",
            };

            $scope.dataTypesOption = {
                valueKey: "Value",
                textKey: "Description",
            };

            $dxrConfig.iacs.common.enum($http, "DataType", function (data) {
                $scope.dataTypes = data;
                $scope.typesList.setList(data);

            });

            $scope.donwloadTemp = function () {

                if ($dxr.isNullOrEmpty($scope.editModel.Type))
                    return;

                var url = "/content/import_template/name.xlsx";
                var name = "";

                for (var i = 0; i < $scope.dataTypes.length; i++) {
                    if ($scope.dataTypes[i].Value == $scope.editModel.Type) {
                        name = $scope.dataTypes[i].Description;
                        break;
                    }
                }

                url = url.replace("name", name);

                window.location.href = url;
            };

            $scope.showImport = function () {
                $scope.editModel = {
                    Type: "",
                    Path: "",
                    Url: "",
                    Name: "",
                    CollectorId: "",
                    CollectorName: "",
                    CollectDate: "",
                    CollectorDepartmentId: "",
                    CollectorDepartmentName: "",
                    CollectorPhoneNo: "",
                };

                $(".importModal .message").addClass("hidden");

                $('.importModal').modal('show');
            };

            var uploader = WebUploader.create({
                swf: '/resources/webuploader/Uploader.swf',
                server: '/api/Upload/File',
                pick: '.fileupload',
                resize: false
            });
            $scope.confirmFile = false;
            $scope.fileUpload = function () {
                $scope.confirmFile = false;
                uploader.upload();
                $('.fileupprogress').progress({
                    percent: 0
                });
                $(".fileupprogress").show();
            };

            $scope.cancelUpload = function () {
                $scope.confirmFile = false;
                uploader.reset();
            };

            uploader.on('fileQueued', function (file) {
                $('.fileupprogress').removeClass("success").removeClass("warning").removeClass("error");
                $(".fileupprogress").hide();
                $(".fileupprogress .label").text("正在上传...");
                $(".importForm input[name=name]").val(file.name);
                $timeout(function () {
                    $scope.confirmFile = true;

                    $scope.editModel.Name = file.name;
                });
            });
            uploader.on('uploadProgress', function (file, percentage) {
                $('.fileupprogress').progress({
                    percent: percentage * 100
                });
            });
            uploader.on('uploadSuccess', function (file, response) {
                uploader.removeFile(file);
                if (response.ret === "ok") {
                    $timeout(function () {
                        $scope.editModel.Name = response.content.name;
                        $scope.editModel.Url = response.content.url;
                        $scope.editModel.Path = response.content.path;
                    });

                    $('.fileupprogress').addClass("success");
                    $(".fileupprogress .label").text("上传成功");
                } else if (response.ret === "warn") {
                    $('.fileupprogress').addClass("warning");
                    $(".fileupprogress .label").text(response.msg);
                } else if (response.ret === "error") {
                    $('.fileupprogress').addClass("error");
                    $(".fileupprogress .label").text(response.msg);
                }

            });

            uploader.on('uploadError', function (file, reason) {
                $('.fileupprogress').addClass("error");
                $(".fileupprogress .label").text("上传失败");
                uploader.removeFile(file);
            });


            $timeout(function () {

                $('.importModal').modal({
                    closable: false,
                    onDeny: function () {
                        $('.importForm').form('clear');
                        $(".fileupprogress").hide();
                        return true;
                    },
                    onApprove: function () {
                        if ($('.importModal .positive.button.loading').length > 0)
                            return false;

                        $('.importForm').form("validate form");
                        if ($('.importForm').form("is valid")) {

                            $('.importModal .positive.button').addClass("loading");
                            $dxrConfig.iacs.information.post($http, $scope.editModel, function (data, index, total) {
                                $(".importForm .message").html("").hide();

                                $scope.editModel.Type = "";
                                $scope.editModel.Path = "";
                                $scope.editModel.Url = "";
                                $scope.editModel.Name = "";
                                $scope.editModel.CollectorId = "";
                                $scope.editModel.CollectorName = "";
                                $scope.editModel.CollectDate = "";
                                $scope.editModel.CollectorDepartmentId = "";
                                $scope.editModel.CollectorDepartmentName = "";
                                $scope.editModel.CollectorPhoneNo = "";

                                $scope.resources.push(data);
                                $('.importModal .positive.button').removeClass("loading");

                                $('.importModal').modal("hide");
                                $dxr.alert("", "ok", "成功导入" + data.Count + "条数据！");

                            }, function (type, msg) {
                                //$dxr.alert("", type, msg);
                                $(".importForm .message").html('<ul class="list"><li>' + msg + '</li></ul>').show();
                                $('.importModal .positive.button').removeClass("loading");
                            });
                        }

                        $(".importModal .message").removeClass("hidden");
                        return false;
                    }
                });

                $('.importForm').form({
                    on: 'blur',
                    inline: true,
                    fields: {
                        type: {
                            identifier: 'type',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请选择类型'
                                }
                            ]
                        },
                        url: {
                            identifier: 'url',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请上传文件'
                                }
                            ]
                        },
                        collectDate: {
                            identifier: 'collectDate',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请选择采集时间'
                                }
                            ]
                        },
                        collectorDepartmentId: {
                            identifier: 'collectorDepartmentId',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请填写派出所'
                                }
                            ]
                        },
                        collectorId: {
                            identifier: 'collectorId',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请填写采集人'
                                }
                            ]
                        },
                        collectorPhoneNo: {
                            identifier: 'collectorPhoneNo',
                            rules: [
                                {
                                    type: 'empty',
                                    prompt: '请填写联系电话'
                                }
                            ]
                        }
                    }
                });

                $('.ui.calendar').calendar({ type: 'date' });
                $('.fileupload div:eq(1)').height(35).width(66);
            });

        }]);
    </script>
</body>
</html>